<template>
  <div class="contact">
    <div class="container">
      <h1 class="section-title">{{ $t('contact.title') }}</h1>
      
      <div class="contact-content">
        <div class="contact-card card">
          <h2>欢迎联系</h2>
          <p class="description">如果您有任何问题或建议，欢迎通过以下方式联系我，我会尽快回复！</p>
          
          <div class="info-item">
            <i class="fas fa-envelope"></i>
            <div class="info-text">
              <h3>Email</h3>
              <p>
                <a href="mailto:1578393930@qq.com">1578393930@qq.com</a>
              </p>
            </div>
          </div>
          
          <div class="info-item">
            <i class="fab fa-github"></i>
            <div class="info-text">
              <h3>GitHub</h3>
              <p>
                <a href="https://gitee.com/wyq517" target="_blank" rel="noopener noreferrer">
                  gitee.com/wyq517
                </a>
              </p>
            </div>
          </div>
          
          <div class="info-item">
            <i class="fab fa-qq"></i>
            <div class="info-text">
              <h3>QQ</h3>
              <p>
                <a href="tencent://message/?uin=1578393930&Site=&Menu=yes">1578393930</a>
              </p>
            </div>
          </div>
          
          <div class="social-links">
            <a href="mailto:1578393930@qq.com" class="social-btn">
              <i class="fas fa-envelope"></i> 发送邮件
            </a>
            <a href="tencent://message/?uin=1578393930&Site=&Menu=yes" class="social-btn">
              <i class="fab fa-qq"></i> 添加QQ
            </a>
            <a href="https://gitee.com/wyq517" target="_blank" class="social-btn">
              <i class="fab fa-github"></i> 访问Gitee
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  
  data() {
    return {
      // No form data needed for this version
    }
  },
  
  methods: {
    // No methods needed for this version
  }
}
</script>

<style lang="scss" scoped>
.contact {
  padding: 2rem 0 4rem;
  
  .contact-content {
    max-width: 600px;
    margin: 0 auto;
  }
}

.section-title {
  text-align: center;
  margin-bottom: 3rem;
  color: var(--accent-color);
}

.contact-content {
  max-width: 600px;
  margin: 0 auto;
}

.contact-card {
  padding: 2rem;
  text-align: center;
  
  h2 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.8rem;
  }
  
  .description {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
  }
  
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    border-radius: var(--border-radius);
    background: var(--bg-secondary);
    transition: transform var(--transition-speed);
    
    &:hover {
      transform: translateY(-2px);
    }
    
    &:last-child {
      margin-bottom: 0;
    }
    
    i {
      font-size: 2rem;
      color: var(--accent-color);
      margin-right: 1rem;
    }
    
    .info-text {
      text-align: left;
      
      h3 {
        margin-bottom: 0.5rem;
      }
      
      p {
        color: var(--text-secondary);
        
        a {
          color: var(--accent-color);
          text-decoration: none;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
  
  .social-links {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    
    .social-btn {
      padding: 0.75rem 1.5rem;
      border-radius: var(--border-radius);
      background: var(--accent-color);
      color: white;
      text-decoration: none;
      transition: all var(--transition-speed);
      
      i {
        margin-right: 0.5rem;
      }
      
      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

@media (max-width: 768px) {
  .contact-content {
    padding: 0 1rem;
  }
  
  .contact-card {
    .social-links {
      flex-direction: column;
      
      .social-btn {
        width: 100%;
      }
    }
  }
}
</style> 